<template>
  <div class="dashboard-container" style="width: 100%;">
    <img :src="imgs" style="margin: 100px auto;display: block">
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import dd1 from '@/assets/dd1.jpg'
import dd2 from '@/assets/dd2.jpg'
import dd3 from '@/assets/dd3.jpg'
import dd4 from '@/assets/dd4.jpg'
import dd5 from '@/assets/dd5.jpg'
import dd6 from '@/assets/dd6.jpg'

export default {
  name: 'Dashboard',
  data() {
    return {
      currentRole: 'adminDashboard',
      imgs: dd1
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  created() {
    this.image()
  },
  activated() {
    this.image()
  },
  methods: {
    image() {
      const tmp = parseInt(Math.random() * 6)
      if (tmp == 0) this.imgs = dd1
      if (tmp == 1) this.imgs = dd2
      if (tmp == 2) this.imgs = dd3
      if (tmp == 3) this.imgs = dd4
      if (tmp == 4) this.imgs = dd5
      if (tmp == 5) this.imgs = dd6
    }
  }
}
</script>
